import React from 'react'
//1. 导入 hook
import { useSelector, useDispatch } from 'react-redux'
import { incre, decre } from '../../redux/slices/countSlice';
import { asyncIncreAction } from '../../redux/slices/countSlice';
import { incre as inc, decre as dec } from '../../redux/slices/zanSlice';

export default function ReduxCom() {
  //2. 获取状态以及 dispatch 函数
  let {value} = useSelector(state => state.count);
  let zan = useSelector(state => state.zan);
  let dispatch = useDispatch();

  //3. 声明事件回调
  let add = () => {
    dispatch(incre(1));
  }

  let minus = () => {
    dispatch(decre(1));
  }

  let asyncAdd = () => {
    dispatch(asyncIncreAction(10));
  }

  return (
    <div>
      <h2>当前的计数值为: {value} </h2>
      <button onClick={add}>新增</button>
      <button onClick={minus}>减少</button>
      <button onClick={asyncAdd}>一秒后新增 10 </button>

      <hr />
      <h2>点赞数: {zan.value}</h2>
      <button onClick={() => {
        dispatch(inc(5));
      }}>新增</button>
      <button onClick={() => {
        dispatch(dec(5));
      }}>减少</button>
    </div>
  )
}
